<template>
    <div>
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/Home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>商品管理</el-breadcrumb-item>
            <el-breadcrumb-item>商品列表</el-breadcrumb-item>
        </el-breadcrumb>
        <el-card>
            <div class="good_table">
                <el-row :gutter="20">
                    <el-col :span="8">
                        <el-input v-model="good_queryInfo.query" placeholder="请输入内容" class="good_search_input" clearable @clear="getGoodList">
                            <el-button slot="append" icon="el-icon-search" class="good_search_button" @click="getGoodList"></el-button>
                        </el-input>
                    </el-col>
                    <el-col :span="4">
                        <el-button type="primary" class="good_add_button" @click="good_add_dialogVisible=true">添加用户</el-button>
                    </el-col>
                </el-row>
                <template>
                    <el-table
                            :data="good_tableDate"
                            border stripe
                            style="width: 100%">
                        <el-table-column
                                type="index">
                        </el-table-column>
                        <el-table-column
                                prop="goods_name"
                                label="商品名称" width="650">
                        </el-table-column>
                        <el-table-column
                                prop="goods_price"
                                label="商品价格">
                        </el-table-column>
                        <el-table-column
                                prop="goods_weight"
                                label="商品重量">
                        </el-table-column>
                        <el-table-column
                                prop="upd_time"
                                label="创建时间">
                            <template slot-scope="scope">
                                {{new Date(scope.row.upd_time).toLocaleString()}}
                            </template>
                        </el-table-column>
                        <el-table-column
                                prop="good_set"
                                label="操作">
                            <template slot-scope="scope">
                                <el-button type="primary" icon="el-icon-edit" size="mini" @click="showEditMessage(scope.row.goods_id)"></el-button>
                                <el-button type="danger" icon="el-icon-delete" size="mini" @click="showDeleteMessage(scope.row)"></el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="good_queryInfo.pagenum"
                            :page-sizes="[1,2,5,10]"
                            :page-size="good_queryInfo.pagesize"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="good_pageTotal" :enterable="false">
                    </el-pagination>
                </template>
                <el-dialog
                        title="提示"
                        :visible.sync="good_add_dialogVisible"
                        width="50%" @close="closeAddDialog">
                    <el-form :model="good_addForm" status-icon :rules="good_addFormRules" ref="good_addFormRef"
                             label-width="100px"
                             class="demo-ruleForm">
                        <el-form-item label="商品名称" prop="goods_name">
                            <el-input v-model="good_addForm.goods_name" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="分类列表" prop="goods_cat">
                            <el-input  v-model="good_addForm.goods_cat" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="价格" prop="goods_price">
                            <el-input v-model="good_addForm.goods_price"></el-input>
                        </el-form-item>
                        <el-form-item label="数量" prop="goods_number">
                            <el-input v-model="good_addForm.goods_number"></el-input>
                        </el-form-item>
                        <el-form-item label="重量" prop="goods_weight">
                            <el-input v-model="good_addForm.goods_weight"></el-input>
                        </el-form-item>
                        <el-form-item label="商品图片">
                            <el-upload
                                    :headers="objHeader"
                                    action="http://www.ysqorz.top:8888/api/private/v1/upload"
                                    :on-preview="handlePreview"
                                    :on-remove="handleRemove"
                                    :file-list="fileList"
                                    list-type="picture"
                                    :on-success="handleSuccess">
                                <el-button size="small" type="primary">点击上传</el-button>
                                <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                            </el-upload>
                        </el-form-item>
                    </el-form>
                    <span slot="footer" class="dialog-footer">
                    <el-button @click="good_add_dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="submitAddForm">确 定</el-button>
          </span>
                </el-dialog>
                <el-dialog
                        title="提示"
                        :visible.sync="good_update_dialogVisible"
                        width="50%" @close="closeUpdateDialog" :close-on-click-modal="false">
                    <el-form :model="good_updateForm" status-icon :rules="good_updateFormRules" ref="good_updateFormRef"
                             label-width="100px"
                             class="demo-ruleForm">
                        <el-form-item label="商品名称" prop="goods_name">
                            <el-input v-model="good_updateForm.goods_name" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="分类列表" prop="goods_cat">
                            <el-input  v-model="good_updateForm.goods_cat" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="价格" prop="goods_price">
                            <el-input v-model="good_updateForm.goods_price"></el-input>
                        </el-form-item>
                        <el-form-item label="数量" prop="goods_number">
                            <el-input v-model="good_updateForm.goods_number"></el-input>
                        </el-form-item>
                        <el-form-item label="重量" prop="goods_weight">
                            <el-input v-model="good_updateForm.goods_weight"></el-input>
                        </el-form-item>
                    </el-form>
                    <span slot="footer" class="dialog-footer">
                    <el-button @click="good_update_dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="submitUpdateForm">确 定</el-button>
          </span>
                </el-dialog>
                <el-dialog
                        title="提示"
                        :visible.sync="good_delete_dialogVisible"
                        width="30%">
                    <span>你确定要删除用户{{this.good_updateForm.goodname}}吗？</span>
                    <span slot="footer" class="dialog-footer">
                    <el-button @click="good_delete_dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="deleteGood">确 定</el-button>
                  </span>
                </el-dialog>
                <el-dialog
                    title="提示"
                    :visible.sync="fileVisble"
                    width="50%">
                    <img :src="filePath" style="width: 100%">
            </el-dialog>
            </div>
        </el-card>
    </div>

</template>
<script>
    export default {
        created() {
            this.getGoodList();
        },
        data(){
            return{
                good_tableDate: [],
                good_queryInfo:{
                    query: '',
                    pagenum: 1,
                    pagesize: 5
                },
                good_pageTotal:0,
                good_add_dialogVisible:false,   //添加用户对话框
                good_update_dialogVisible:false,//修改用户信息对话框
                good_delete_dialogVisible:false,//删除用户对话框
                good_addForm:{
                    goods_name:'',
                    goods_cat:"1640,1642,1651",
                    goods_price:'',
                    goods_number:'',
                    goods_weight:'',
                    goods_introduce: '',
                    pics: [],
                    attrs: [{attr_id: 4283, attr_value: "21 12 3 3 4"}]
                },
                good_updateForm:{
                    goods_name:'',
                    goods_cat:'',
                    goods_price:'',
                    goods_number:'',
                    goods_weight:'',
                    goods_introduce: '',
                    pics: '',
                    attrs: ''
                },
                good_addFormRules:{
                    goods_name:[
                        {
                            required:true,message:"请输入用户名",trigger:"blur"
                        }
                    ],
                    goods_cat:[
                        {
                            required:true,message:"请输入密码",trigger:"blur"
                        }
                    ],
                    goods_price:[
                        {
                            required:true,message:"请输入用户名",trigger:"blur"
                        }
                    ],
                    mobile: [
                        {
                            required:true,message:"请输入用户名",trigger:"blur"
                        }
                    ]
                },
                good_updateFormRules:{
                    email:[
                        {
                            required:true,message:"请输入用户名",trigger:"blur"
                        },
                        {
                            type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change']
                        }
                    ],
                    mobile: [
                        {
                            required:true,message:"请输入用户名",trigger:"blur"
                        }
                    ]
                },
                fileList: [],
                filePath:'',
                fileVisble:false,
                objHeader:{
                    Authorization : window.sessionStorage.getItem('token')
                }
            }
        },
        methods:{
            async getGoodList() {
                const {data:result}=await this.$http.get("goods",{
                    params:this.good_queryInfo
                });
                if(result.meta.status!='200'){this.$message.error(result.meta.msg);}
                this.good_pageTotal=result.data.total;
                this.good_tableDate=result.data.goods;
                this.$message.success(result.meta.msg);
            },
            async setGoodState(goodInfo){
                const {data:result} = await this.$http.put(`goods/${goodInfo.id}/state/${goodInfo.mg_state}`);
                if(result.meta.status!=200){
                    this.$message.error(result.meta.msg);
                }
                this.$message.success(result.meta.msg);
            },
            handleSizeChange(val) {
                //切换每页显示多少条
                //console.log(`每页 ${val} 条`);
                this.good_queryInfo.pagesize=val;
                this.getGoodList();
            },
            handleCurrentChange(val) {
                //切换当前页数
                //console.log(`当前页: ${val}`);
                this.good_queryInfo.pagenum=val;
                this.getGoodList();
            },
            //添加用户
            submitAddForm() {
                this.$refs['good_addFormRef'].validate(async valid => {
                    if (valid) {
                        const {data: result} = await this.$http.post("goods", this.good_addForm);
                        if (result.meta.status == 201) {
                            this.$message.success(result.meta.msg);
                            this.closeAddDialog();
                            this.getGoodList();
                        } else {
                            this.$message.error(result.meta.msg);
                        }
                        this.good_add_dialogVisible=false;
                    } else {
                        return false;
                    }
                });
            },
            //重置添加用户表单
            closeAddDialog(){
                this.good_add_dialogVisible = false;
                this.$refs['good_addFormRef'].resetFields();
            },
            //为修改栏提供默认用户信息
            async showEditMessage(id){
                const {data:result} = await this.$http.get(`goods/${id}`);
                if(result.meta.status==200){
                    this.$message.success(result.meta.msg);
                    this.good_updateForm=result.data;
                }else {
                    this.$message.error(result.meta.msg);
                }
                this.good_update_dialogVisible=true;
            },
            //提交更新用户信息
            submitUpdateForm(){
                this.$refs['good_updateFormRef'].validate(async valid => {
                    if (valid) {
                        const {data: result} = await this.$http.put(`goods/${this.good_updateForm.goods_id}`, this.good_updateForm);
                        if (result.meta.status == 200) {
                            this.$message.success(result.meta.msg);
                            this.closeUpdateDialog();
                            this.getGoodList();
                        } else {
                            this.$message.error(result.meta.msg);
                        }
                    } else {
                        return false;
                    }
                });
            },
            //重置修改用户表单
            closeUpdateDialog(){
                this.good_update_dialogVisible = false;
                this.$refs['good_updateFormRef'].resetFields();
            },
            //删除用户信息
            showDeleteMessage(goodInfo){
                this.good_delete_dialogVisible=true;
                this.good_updateForm=goodInfo;
            },
            async deleteGood(){
                const {data: result} = await this.$http.delete(`goods/${this.good_updateForm.goods_id}`);
                if (result.meta.status == 200) {
                    this.$message.success(result.meta.msg);
                    this.good_delete_dialogVisible=false;
                    this.getGoodList();
                } else {
                    this.$message.error(result.meta.msg);
                }
            },
            handleRemove(file, fileList) {
                console.log(file, fileList);
            },
            handlePreview(file) {
                console.log()
                console.log(file);
                this.filePath='http://www.ysqorz.top:8888/'+file.response.data.tmp_path
                this.fileVisble = true;
            },
            handleSuccess(res){
                console.log(res)
                this.good_addForm.pics.push(res.data.tmp_path)
            }
        }
    }
</script>
<style lang="less" scoped>
    .good_table {
        .good_table_header{
            .good_search_input {
                width: 30%;
                float: left;
            }
            .good_search_button {
                background-color:#DCDFE6;
                box-shadow: 0 0 10px #ddd;//加阴影，向外扩散10像素
                float: left;
                width: 6%;
            }
            .good_add_button{
                width: 10%;
                padding-left: 20px;
                float: left;
            }
        }

    }
</style>